<template>
  <div>
    <div style="margin-left: 2%">
      <h1>班级人数统计</h1>
      <div id="dv01" class="dvecharts"></div>
    </div>
  </div>
</template>

<script>
  import request from '@/utils/request'

  export default {
    name: 'TclassEcharts',
    data(){
      return{
        TclassEcharts:{},
        TclassOption:{}
      }
    },
    mounted() {
      this.initEcharts1();
    },
    methods:{
      initEcharts1(){
        // 基于准备好的dom，初始化echarts实例
        this.TclassEcharts = this.$echarts.init(document.getElementById('dv01'));

        // 指定图表的配置项和数据
        this.TclassOption = {
          title: {
            text: '班级人数统计'
          },
          tooltip: {},
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: { readOnly: false },
              magicType: { type: ['line', 'bar'] },
              restore: {},
              saveAsImage: {}
            }
          },
          legend: {
            data: ['人数']
          },
          xAxis: {
            data: ['研发部', '财务部', '人力部', '市场部', '行政部', '总经办']
          },
          yAxis: {},
          series: [
            {
              classid: '人数',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }
          ]
        };
        //请求接口 获取真实数据
        request({
          url:"edu/tclass/echarts.do"
        }).then(res=>{
          this.TclassOption.xAxis.data=res.data.classid;
          this.TclassOption.series[0].data=res.data.cnum;
          // 使用刚指定的配置项和数据显示图表。
          this.TclassEcharts.setOption(this.TclassOption);
        })

      }
    }
  }
</script>

<style scoped>
  .dvecharts{
    width: 48%;
    height: 400px;
  }
</style>
